<template>
  <div id="app">
    <img class="image" :src="url">
    <ul class="public_uls">
      <li class="list" v-for="(value, index) of images" @click="btn(index)" :key="index">{{index + 1}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return{
      url:'1.jpg',
      images:['1.jpg','2.jpg','3.jpg']
    }
  },
  methods:{
    btn(index){
      this.url = this.images[index];
    }
  }
}  
</script>

<style>
  *{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
  }
  .image{
    width: 200px;
    height: 300px;
  }
  .public_uls{
    list-style-type: none;
  }
  .list{
    width: 50px;
    height: 50px;
    border: 2px solid black;
    float: left;
  }
</style>
